import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:hovue/common/routers/pages.gr.dart';
import 'package:hovue/common/values/images.dart';
import 'package:auto_route/auto_route.dart';

@RoutePage()
class IntroductionPage extends StatelessWidget {
  const IntroductionPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 背景图
          Image.asset(
            Images.introduction,
            width: double.infinity,
            height: double.infinity,
            fit: BoxFit.cover,
          ),
          
          // 内容层
          SafeArea(
            child: Padding(
              padding: EdgeInsets.all(24.w),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // 顶部空间
                  SizedBox(height: 20.h),
                  
                  // 标题和副标题区域（带背景）
                  Stack(
                    children: [
                      // 背景Container
                      Container(
                        width: 375.w,
                        height: 240.h,
                        decoration: BoxDecoration(color: const Color(0x02D9D9D9)),
                      ),
                      
                      // 标题和副标题内容
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          // 标题
                          Text(
                            'Home Craft',
                            style: GoogleFonts.limelight(
                              fontSize: 40.sp,
                              fontWeight: FontWeight.w400,
                              color: Colors.white,
                            ),
                          ),
                          
                          // 副标题
                          Text(
                            'Renovating an old house adds color to\n your home and makes your rental life\n more fulfilling.',
                            style: TextStyle(
                              fontSize: 14.sp,
                              fontWeight: FontWeight.w400,
                              color: Colors.white,
                              height: 1.5.h,
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                  
                  // 底部按钮
                  const Spacer(),
                  SizedBox(
                    width: double.infinity,
                    height: 58.h,
                    child: ElevatedButton(
                      onPressed: () {
                        // 点击按钮后的导航逻辑
                        // context.router.replace(const MainRoute());
                        context.router.push(const CoverRoute());
                      },
                      style: ElevatedButton.styleFrom(
                        backgroundColor: const Color(0xFFA66645),
                        foregroundColor: Colors.white,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(12.r),
                        ),
                      ),
                      child: Text(
                        'Let\'s start exploring',
                        style: TextStyle(
                          fontSize: 14.sp,
                          fontWeight: FontWeight.w400,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ),
                  SizedBox(height: 24.h),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}
